<script setup>
import ButtonLogin from '@/components/ButtonLogin.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 路由跳转
const router = useRouter()
const toLogin = () => {
    router.push('/login')
}
const toGitee = () => {
    window.open('https://gitee.com/mindwell/bank-management')
}

// 弹框控制
const modalVisible = ref(false)
const modalImage = ref('')

const showModal = (imagePath) => {
    modalImage.value = imagePath
    modalVisible.value = true
}
const hideModal = () => {
    modalVisible.value = false
}

// 平滑滚动到指定页面
const scrollToSection = (sectionId) => {
    document.querySelector(sectionId).scrollIntoView({ behavior: 'smooth' })
}
</script>

<template>
  <div class="container">
    <!-- Header -->
    <header class="header">
      <h1 class="title">
        火域智眼——基于双模态感知的浓烟环境下人体目标实时检测系统
      </h1>
      <button-login
        @click="toLogin"
        text="登录/注册 →"
        extraClass="login-btn"
      ></button-login>
    </header>

    <!-- Main Content -->
    <main class="main">
      <!-- 第一页：System Intro -->
      <section id="system-intro" class="section system-intro">
        <div class="left">
          <h1>
            基于<span>双模态感知</span>的<br />浓烟环境下<span>人体目标实时检测</span>系统
          </h1>
          <p>
            “火域智眼”系统通过双模态感知技术与微服务架构，为消防指挥中心工作人员提供高效的指挥与协作工具，提升火灾应急响应能力。
          </p>
          <div class="btn-wrapper">
            <button-login
              @click="toLogin"
              text="立即体验"
              extraClass="btn-use btn-intro"
            ></button-login>
            <button-login
              @click="toGitee"
              text="联系我们"
              extraClass="btn-contact btn-intro"
            ></button-login>
          </div>
        </div>
        <figure class="right">
          <img
            src="/src/assets/svg/金融.svg"
            alt="消防机器人插图"
            class="img"
          />
        </figure>
      </section>

      <!-- 第二页：去烟模块 -->
      <section id="smoke-removal" class="section smoke-removal">
        <h2>去烟模块</h2>
        <div class="content">
          <div class="left-content">
            <div class="model">
              <img
                src="/src/assets/svg/模型算法.svg"
                alt="去烟模型抽象图"
                @mouseover="showModal('/src/assets/svg/模型算法.svg')"
              />
            </div>
          </div>
          <div class="right-content">
            <img src="/src/assets/svg/模型算法.svg" alt="红外图片" />
            <img src="/src/assets/svg/模型算法.svg" alt="去烟后图片" />
          </div>
        </div>
      </section>

      <!-- 第三页：对齐和双模态融合模块 -->
      <section id="alignment-fusion" class="section alignment-fusion">
        <h2>对齐和双模态融合模块</h2>
        <div class="content">
          <div class="left-content">
            <div class="model">
              <img
                src="/src/assets/svg/模型算法.svg"
                alt="融合模型抽象图"
                @mouseover="showModal('/src/assets/svg/模型算法.svg')"
              />
            </div>
          </div>
          <div class="right-content">
            <div class="image-grid">
              <img src="/src/assets/svg/模型算法.svg" alt="红外图片" />
              <img src="/src/assets/svg/模型算法.svg" alt="热成像图片" />
              <img src="/src/assets/svg/模型算法.svg" alt="融合后图片" />
            </div>
          </div>
        </div>
      </section>

      <!-- 第四页：YOLOv12人体检测 -->
      <section id="yolov12" class="section yolov12">
        <h2>YOLOv12人体检测</h2>
        <div class="content">
          <div class="left-content">
            <div class="model">
              <img
                src="/src/assets/svg/模型算法.svg"
                alt="YOLOv12模型抽象图"
                @mouseover="showModal('/src/assets/svg/模型算法.svg')"
              />
            </div>
          </div>
          <div class="right-content">
            <img src="/src/assets/svg/模型算法.svg" alt="人体检测图" />
          </div>
        </div>
      </section>
    </main>

    <!-- 侧边导航栏 -->
    <aside class="sidebar">
      <ul>
        <li><a @click="scrollToSection('#system-intro')">系统介绍</a></li>
        <li><a @click="scrollToSection('#smoke-removal')">去烟模块</a></li>
        <li>
          <a @click="scrollToSection('#alignment-fusion')">对齐和双模态融合</a>
        </li>
        <li><a @click="scrollToSection('#yolov12')">YOLOv12人体检测</a></li>
      </ul>
    </aside>

    <!-- 弹框 -->
    <transition name="fade">
      <div v-if="modalVisible" class="modal" @click="hideModal">
        <div class="modal-content" @click.stop>
          <img :src="modalImage" alt="详细图" />
        </div>
      </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
$color-white: #fff;
$color-grey-light-1: #f7f7f7;
$color-grey-dark-1: #999;
$color-grey-dark-2: #666;
$color-dark: #333;

.container {
  background-color: $color-grey-light-1;
  position: relative;
  min-height: 100vh;
}

.header {
  background-color: $color-white;
  height: 8rem;
  width: 100%;
  box-shadow: 0 0.5rem 0.5rem rgba($color-grey-dark-1, 0.1);
  color: $color-dark;
  position: fixed;
  top: 0;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;

  .title {
    font-size: 3rem;
  }

  .login-btn {
    padding: 1.5rem;
    width: 15rem;
    font-size: 1.5rem;
  }
}

.main {
  scroll-behavior: smooth;
}

.section {
  min-height: 100vh;
  padding: 8rem 4rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;

  h2 {
    font-size: 3.5rem;
    color: $color-grey-dark-2;
    margin-bottom: 2rem;
  }

  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .left-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .right-content {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
  }

  .model img {
    width: 300px;
    height: 200px;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .model img:hover {
    transform: scale(1.1);
  }
}

/* System Intro */
.system-intro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6rem;

  .left {
    h1 {
      font-size: 4rem;
      line-height: 1.2;
      span {
        color: $color-grey-dark-2;
      }
    }

    p {
      font-size: 2.3rem;
      line-height: 1.5;
      margin: 2rem 0;
    }

    .btn-wrapper {
      display: flex;
      gap: 2rem;

      .btn-intro {
        padding: 1.5rem;
        width: 15rem;
        font-size: 1.5rem;
      }
    }
  }

  .right .img {
    width: 90%;
    object-fit: cover;
  }
}

/* 去烟模块 */
.smoke-removal {
  background-color: #f0f4f8;

  .right-content {
    img {
      width: 350px;
      height: 250px;
      border-radius: 8px;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
  }
}

/* 对齐和双模态融合模块 */
.alignment-fusion {
  background-color: #e8ecef;

  .right-content {
    .image-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    img {
      width: 250px;
      height: 180px;
      border-radius: 8px;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
  }
}

/* YOLOv12人体检测 */
.yolov12 {
  background-color: #f0f4f8;

  .right-content {
    img {
      width: 400px;
      height: 300px;
      border-radius: 8px;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    }
  }
}

/* 侧边导航栏 */
.sidebar {
  position: fixed;
  top: 50%;
  left: 2rem;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  z-index: 50;

  ul {
    list-style: none;
    padding: 0;
  }

  li {
    margin-bottom: 1.5rem;
  }

  a {
    text-decoration: none;
    color: $color-grey-dark-2;
    font-size: 1.6rem;
    cursor: pointer;
    transition: color 0.3s ease;

    &:hover {
      color: #007bff;
    }
  }
}

/* 弹框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: $color-white;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);

  img {
    max-width: 80vw;
    max-height: 80vh;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
